<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        placeholder="商品名称"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        查询
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        新增商品
      </el-button>
    </div>
    <el-tabs
      v-model="activeName"
      type="border-card"
      :stretch="false"
      @tab-click="handleClick"
    >
      <el-tab-pane label="商城" name="1">
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column label="ID" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="图片" align="center">
            <template slot-scope="{ row }">
              <el-image
                style="width: 100px; height: 100px"
                :src="row.imagelist[0]"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column label="标题" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="分类" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.cname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="价格" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="类型" align="center">
            <template slot-scope="{ row }">
              <span>{{
                row.cdtype == 1 ? "平台" : row.cdtype == 2 ? "积分" : "未设置"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" class-name="status-col" width="100">
            <template slot-scope="{ row }">
              <el-tag :type="row.status | statusFilter">
                {{
                  row.status == 1
                    ? "启用"
                    : row.status == 2
                    ? "封禁"
                    : row.status == 3
                    ? "暂停使用"
                    : "异常"
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="230"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row, $index }">
              <el-button type="primary" size="mini" @click="handleUpdate(row)">
                编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(row, $index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="积分商城" name="2">
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column label="ID" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="图片" align="center">
            <template slot-scope="{ row }">
              <el-image
                style="width: 100px; height: 100px"
                :src="row.imagelist[0]"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column label="标题" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="分类" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.cname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="价格" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="类型" align="center">
            <template slot-scope="{ row }">
              <span>{{
                row.cdtype == 1 ? "平台" : row.cdtype == 2 ? "积分" : "未设置"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" class-name="status-col" width="100">
            <template slot-scope="{ row }">
              <el-tag :type="row.status | statusFilter">
                {{
                  row.status == 1
                    ? "启用"
                    : row.status == 2
                    ? "封禁"
                    : row.status == 3
                    ? "暂停使用"
                    : "异常"
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="230"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row, $index }">
              <el-button type="primary" size="mini" @click="handleUpdate(row)">
                编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(row, $index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="90px"
        style="width: 500px; margin-left: 50px"
      >
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            action="https://cs4.hephp.cn/api/Banlist/update"
            :show-file-list="false"
            accept=".png, .jpg, .jpeg"
            :on-success="handleAvatarSuccess"
          >
            <div v-if="temp.image" style="overflow: hidden">
              <div
                style="float: left; margin-left: 5px"
                v-for="(item, index) in temp.imagelist"
                :key="index"
              >
                <img :src="item" class="avatar" />
                <div @click="hdelv(index)">删除</div>
              </div>
            </div>
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="分类" prop="cid">
          <el-select v-model="temp.cid" filterable placeholder="请选择">
            <el-option
              v-for="item in cList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="temp.title" />
        </el-form-item>

        <el-form-item label="类型" prop="cdtype">
          <el-radio-group v-model="temp.cdtype">
            <el-radio :label="1">平台</el-radio>
            <el-radio :label="2">积分</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="价格" prop="title">
          <el-input v-model="temp.num" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="temp.status"
            class="filter-item"
            placeholder="Please select"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.key"
              :label="item.display_name"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
        >
          {{ textMap[dialogStatus] }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  fetchList,
  fetchPv,
  createArticle,
  updateArticle,
  getDel,
  getListAll,
  getClist,
} from "@/api/goods";
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import UploadExcelComponent from "@/components/UploadExcel/index.vue";
const statusOptions = [
  { key: 1, display_name: "启用" },
  { key: 2, display_name: "封禁" },
];

export default {
  name: "ComplexTable",
  components: { Pagination, UploadExcelComponent },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: "success",
        2: "info",
        3: "danger",
      };
      return statusMap[status];
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    },
  },
  data() {
    return {
      activeName: "1",
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        cdtype: 1,
        name: "",
      },
      importanceOptions: [1, 2, 3],
      statusOptions,
      imtype: false,
      showReviewer: false,
      temp: {
        id: undefined,
        image: "",
        title: "",
        cid: "",
        imagelist: [],
        num: "",
        cdtype: 1,
        status: 1,
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "新增",
        impolephone: "Impole",
      },
      cList: [],
      rules: {},
      downloadLoading: false,
    };
  },
  created() {
    this.getList();
    this.getclists();
  },
  methods: {
    handleClick(e) {
      console.log(e.name);
      this.listQuery.cdtype = e.name;
      this.getList();
    },
    hdelv(index) {
      let imagelist = this.temp.imagelist;
      imagelist.splice(index, 1);
      this.temp.imagelist = imagelist;
      this.temp.image = imagelist.join(",");
    },
    getclists() {
      getClist(this.listQuery).then((response) => {
        this.cList = response.data;
      });
    },
    handleAvatarSuccess(res, file) {
      let imagelist = this.temp.imagelist;
      imagelist.push(res.data);
      this.temp.imagelist = imagelist;
      this.temp.image = imagelist.join(",");
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then((response) => {
        console.log(response.data);
        this.list = response.data.list;
        this.total = response.data.count;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },

    resetTemp() {
      this.temp = {
        id: undefined,
        image: "",
        title: "",
        cid: "",
        cdtype: 1,
        imagelist: [],
        num: "",
        status: 1,
      };
    },
    handleCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    createData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          createArticle(this.temp).then(() => {
            this.getList();
            this.dialogFormVisible = false;
            this.$notify({
              title: "Success",
              message: "Created Successfully",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    updateData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp);
          updateArticle(tempData).then(() => {
            this.getList();
            this.dialogFormVisible = false;
            this.$notify({
              title: "Success",
              message: "Update Successfully",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
    handleDelete(row, index) {
      let that = this;
      this.$confirm("此操作将永久该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that.Getdel(row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    Getdel(id) {
      let mup = {
        id: id,
      };
      getDel(mup).then((response) => {
        if (response.code == 200) {
          this.$notify({
            title: "Success",
            message: "Update Successfully",
            type: "success",
            duration: 2000,
          });
          this.getList();
        } else {
          this.$notify({
            title: "Success",
            message: "del none",
            type: "error",
            duration: 2000,
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #8c939d;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  border: 1px solid #8c939d;
  display: block;
}
</style>
